<template>
	<view :class="{bg141414:theme}" style="min-height: 100vh;">

		<image mode="widthFix" v-if="type==0" class="image posiab" src="/static/xaing.png"></image>
		<image mode="widthFix" v-else-if="type==2" class="image posiab" src="/static/fxaing.png"></image>
		<image mode="widthFix" v-else class="image posiab" src="/static/zaing.png"></image>
		
		
		<view class="posiab zindex5" :style="{paddingTop:shh+'px'}">
			<view @click="back"  class="flex-ju-c mt30 wh70-70 ra100 mt30 ml30 ">
				<view  class="" >
					<image mode="widthFix" class="image width32   " src="/static/back.png"></image>
				</view>
			</view>
		</view>
		<view class="colorfff posire  pt19vh">
			<view class="flex-ju-c">
				<image class="image wh465-465 ra20" :src="synthesisdata.thumb"></image>
			</view>
			<view class="flex-ju-c size31 mt150">{{synthesisdata.title}}</view>
			<view class="flex-ju-c mt30">
			<view 
				class="flex-a-i size24 borderccc ra10 hidden mr20">
				<view class="ibgtoCAF881-A0E99A color000 pt5 pb5 pl10 pr10">{{type==2?'分解':type==0?'合成':'置换'}}次数</view>
				<view class="pr10 pl10 size28">{{synthesisdata.stock}}份</view> 
			</view>
			<!-- <view
				class="flex-a-i size24 borderccc ra10 hidden ml20">
				<view class="ibgtoCAF881-A0E99A color000 pt5 pb5 pl10 pr10">流通</view>
				<view class="pr10 pl10 size28">333份</view>
			</view> -->
			</view>
			<view class="bgfff mt50 pg30 color000" style="border-top-right-radius: 40rpx;border-top-left-radius: 40rpx;">
				<!-- <view class="flex-a-i">
					<image src="/static/aaa.png" class="wh83-83 ra83"></image>
					<view class="ml20">
						<view class="size26">创作者的名字</view>
						<view class="color999 size25">500粉丝</view>
					</view>
				</view> -->
				
				<view class="mt30" v-if="type!=0">
					<view class="bgF6F7F8 pg30 ra20">
						<view class="bold size29">{{type==2?'分解材料':'置换材料'}}</view>
						<view class="bgfff flex-ju-b pg10 ra10 mt35">
							<view class="flex-a-i">
								<image :src="synthesisdata.materials.thumb" class="wh97-97 flex ra10"></image>
								<view class="size26 ml15">{{synthesisdata.materials.title}}</view>
							</view>
							<view>x1</view>
						</view>
						
						<view v-if="synthesisdata.batch_combine" class="pilaing " style="height: auto;">
							<view class="flex-ju-b  ra20 mt35 bgF6F7F8 size26 ">
								<view>{{type==2?'分解':'置换'}}数量</view>
								<view class="flex-a-i center ra30" :class="theme?'bg292929 colorfff':'bgF5F6F7'">
									<view :style="{borderRight:theme?'1px solid #000':'1px solid #F5F6F7'}" @click="jian"
										class="wh48-60 flex-ju-c pl5 size40">-</view>
									<view>
										<input :class="theme?' colorfff':'color000'" class="width95 " v-model="hechengCount" />
									</view>
									<view @click="jia" :style="{borderLeft:theme?'1px solid #000':'1px solid #F5F6F7'}"
										class="wh48-60 flex-ju-c pr5  size40">+</view>
								</view>
								</view>
						</view>
					</view>
					<view class="bgF6F7F8 pg30 ra20 mt30">
						<view class="bold size29">{{type==2?'分解获得':'置换获得'}}</view>
						<view class="bgfff flex-ju-b pg10 ra10 mt20" v-for="(item,h) in synthesisdata.make_skus" :key="h" >
							<view class="flex-a-i">
								<image :src="item.thumb" class="wh97-97 flex ra10"></image>
								<view class="size26 ml15">{{item.title}}</view>
							</view>
							<view class=""><text class="size28">x</text>{{item.num}}</view>
						</view>
						
					</view>
				</view>
				
				<template v-else>
					
					<view  :class="theme?'bg292929 colorfff':'bgF5F6F7'" class="borderE1E1E1 size26 ra20 pg30-20 mt20">
						<view class="size30 bold">合成消耗（{{chanum}}/{{alllnums}}）</view>
						<view class="flex-ju-b mt20 " v-for="(item,index) in synthesisdata.materials" :key="index">
							<view class="color999">{{item.data[0].title}}（{{selected[index].length}}/{{item.num * ahecheng}}）</view>
							<view v-if="selected[index].length >= item.num * ahecheng" class="color999 ">已完成</view>
							<view @click="tomai" v-else class="colorfff bg000 wh104-48 ra6  flex-ju-c">去购买</view>
						</view>
						
					</view>
					
					<view class="borderE1E1E1 pg20 ra20 mt30">
						<view class="bold size29">合成获得
						<text v-if="stype==3&&synthesisdata.make_skus.length>1">(随机{{synthesisdata.make_skus.length}}选1)</text>
						</view>
						<view class="bgfff flex-ju-b pg10 ra10 mt20" v-for="(item,h) in synthesisdata.make_skus" :key="h" >
							<view class="flex-a-i">
								<image :src="item.thumb" class="wh97-97 flex ra10"></image>
								<view class="size26 ml15">{{item.title}}</view>
							</view>
							<!-- <view class=""><text class="size28">x</text>{{item.num?item.num:1}}</view> -->
						</view>
					</view>
					
				</template>
				
			</view>
		</view>
		
		
		<view class="con borderE1E1E1 ra20 ">
			<view class=" size26 ra20 pg30-20 " :class="theme?'bg292929 colorfff':'bgF5F6F7'">
				<view class="size30 bold mb20">藏品详情</view>
				<image mode="widthFix" class="image" :src="item" v-for="(item,index) in synthesisdata.detail_images"></image>
				<view class="size30 bold mb20 mt20">购买须知</view>
				<view class="color999">
					<view class="mb30">
						数字藏品交易仅限于18周岁(不含)以上、60周岁(含)以下，并已完成实名认证的中国大陆用户购买。由于不同属性的数字艺术有不同的二次交易规则，请您仔细阅读并同意相关规则后再进行相应操作，以避免不必要的损失。
					</view>
					请注意，一旦数字藏品完成出售，不支持退货在购买之前，请仔细考虑您的购买决策。根据我国相关的法律要求，特定条件下的数字藏品的二次交易不支持任何形式的变相炒作。我们坚决反对数字藏品炒作、场外交易、欺诈，以及其他非法侵权行为。请您甄别上述涉嫌网络欺诈的行为并了解相关风险。
				</view>
			</view>
		</view>
		<view class="pb200"></view>
		
		<view v-if="type==0" class="posifi width1000 bottom0 bgfff zindex10 height150 hidden flex-a-i ra20"
			style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">

			<view class="con">
				<view class="flex-ju-b height98 mt2  width1000 ra100 ">
					<view v-if="synthesisdata.batch_combine" class="flex-ju-c border000 height98 flex1 ra20 mr30" :class="theme?'bg292929':''">
						<view @click="$refs.hecheng.open()" class=" size29 flex1 flex-ju-c ra100 bold">
							批量合成
						</view> 
					</view>
					
					<view class="flex-a-i border000 bg000 colorfff flex1 ra20 height98 " :class="theme?'bg292929':'bgfff'">
						<view @click="taphes" class="srgb height100 size29 flex1 flex-ju-c ra100 bold">
							立即合成
						</view>
					</view>
				</view>
			</view>

		</view>

		<view v-else-if="type==2" class="posifi width1000 bottom0 bgfff zindex10 height150 hidden flex-a-i ra20"
			style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
			<view class="con">
				<view class="flex-ju-b height98 mt2  width1000 ra100 borderccc">
					<view class="flex-a-i  flex1 ra100" :class="theme?'bg292929':'bgfff'">
						<view @click="tapfens" class="srgb bg000 colorfff height100 size29 flex1 flex-ju-c ra20 bold">
							立即分解
						</view>
					</view>
				</view>
			</view>
		</view>


		<view v-else-if="type==1" class="posifi width1000 bottom0 bgfff zindex10 height150 hidden flex-a-i ra20"
			style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
			<view class="con">
				<view class="flex-ju-b height98 mt2  width1000 ra100 borderccc">
					
					<view class="flex-a-i  flex1 ra100" :class="theme?'bg292929':'bgfff'">
						<view @click="tapfens" class="srgb bg000 colorfff height100 size29 flex1 flex-ju-c ra20 bold">
							立即置换
						</view>
					</view>
				</view>
			</view>


		</view>

	</view>

	<uni-popup @change="hechengchange" ref="hecheng" type="bottom">
		<view class="pilaing " :class="theme?'bg141414 colorfff':'bgfff'">
			<view class="flex-ju-b pt40">
				<view class="width28 ml30"></view>
				<view class="size29 bold  flex-ju-c">批量{{type==1?'置换':type==0?'合成':'分解'}}</view>
				<image mode="widthFix" @click="$refs.hecheng.close()" class="width28 mr30" src="/static/close.png"></image>
			</view>
			<view class="con">
			<view class="flex-ju-b  ra20 pg40 bgF6F7F8 size26 mt40">
				<view>数量</view>
				<view class="flex-a-i center ra30" :class="theme?'bg292929 colorfff':'bgF5F6F7'">
					<view :style="{borderRight:theme?'1px solid #000':'1px solid #F5F6F7'}" @click="jian"
						class="wh48-60 flex-ju-c pl5 size40">-</view>
					<view>
						<input :class="theme?' colorfff':'color000'" class="width95 " v-model="hechengCount" />
					</view>
					<view @click="jia" :style="{borderLeft:theme?'1px solid #000':'1px solid #F5F6F7'}"
						class="wh48-60 flex-ju-c pr5  size40">+</view>
				</view>
				</view>
			</view>
			<view class="flex-ju-c con flex1 mt60">
					<view @click="numbetsrue"  class="flex-ju-c width1000 height100 ra20  bg000 colorfff"
						>确认</view>
			</view>

		</view>
	</uni-popup>


	<uni-popup type="bottom" background-color="#fff" border-radius="10px 10px 0 0" ref="getcollection">
		<view class="pt40 pb40">
			<view class="flex-ju-b posire size29 bold mb50">
				<uni-icons type="closeempty" @click="$refs.getcollection.close()" class="ml30" color="#000"></uni-icons>
				<view>{{tapselm[0].title}}</view>

				<uni-icons type="closeempty" color="#fff"></uni-icons>
			</view>
			<view class="con">
				<scroll-view scroll-y class="height850">
					<view v-if="!tapselm.length" class="flex-ju-c mt2vh mb2vh">
						<view class="flex-ju-c flex-col">
							<image mode="widthFix" class="width210 ra20" src="/static/nodata.png"></image>
							<view class=" size24">这里什么也没有~</view>
						</view>
					</view>
					<view class="box3-33.3b box3">
						<view @click="tapxianshi(gg, item)" class="a3box mb30" v-for="(item, gg) in tapselm" :key="gg">
							<view class="border000 width200 ra20 pb10 flex-ju-c flex-col">
								<image class="wh200-200 ra20" :src="item.thumb"></image>
								<!-- <view class="size29 bold mt10">{{item.title}}</view> -->
								<view class="size29 bold mt10">#{{hao(item.nftId)}}</view>
								<view>
									<view class="dayuan mt10 flex-ju-c">
										<view
											:class="item.status != 5 && item.meta_chain != 0 && item.check ? 'xiaoyuan' :''"
											class="xiaoyuan1"></view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</scroll-view>
				<view v-if="checkd" class="bg999 flex-ju-c wh694-100 ra100 mt30">确定</view>
				<view @click="quedingd" v-else class="srgb flex-ju-c wh694-100 ra100 mt30">确定</view>
			</view>
		</view> 
	</uni-popup>

</template>

<script>
	export default {
		data() {
			return {
				ahecheng: 1,
				chanum: 0,
				alllnums: 0,
				pgList: 0,
				type: 0,
				itemindex: {},
				uuid: "",
				synthesisdata: {
					materials: [],
					conditions: []
				},
				selindex: 0,
				checkd: false,
				sel: [],
				tapselm: [],
				selected: [],
				hechengCount: 1,
				endtimer: "",
				starttimer: "",
				isall: [],
				stype:"",
				theme: uni.getStorageSync('theme'),
			}
		},
		mounted() {

		},
		onLoad(option) { 
			this.type = option.type
			this.stype=option.stype
			this.uuid = option.uuid
		},
		onShow() {
			this.chanum=""
			this.hechengCount=1
			if (this.type == 2) {
				this.http('decompose/' + this.uuid).then(res => {
					this.synthesisdata = res.data
				})
			
			} else if (this.type == 0) {
				var url ='combination/'
				if(this.stype==3){
					url ='bfcombination/'
				}
				this.http(url + this.uuid).then(res => {
					this.synthesisdata = res.data
					res.data.mauzu = [];
					res.data.conditions.map((item) => {
						if (item.own_number >= item.num) {
							res.data.mauzu.push(1);
						}
					});
			
					this.isall = [];
					res.data.materials.map((item, index) => {
						item.img = '';
						item.nums = 0;
						item.check = false;
						this.isall.push([]);
						this.alllnums = index + 1
						this.getp(item.data[0].id, index, item.num * this.hechengCount)
					});
			
					this.endtimer = this.istime(res.data.end_date)
					this.starttimer = this.istime(res.data.start_date)
			
				})
			} else {
				this.http('exchange/' + this.uuid).then(res => {
					this.synthesisdata = res.data
				})
			}
		},
		methods: {
			tomai(){
				uni.reLaunch({
					url: "/pages/shichang/index"
				})
			},		
		
			tapfens() {
				if (this.type == 2) {
					this.http(`decompose/${this.uuid}/confirm`, {
						num: this.hechengCount
					}, 'post').then(res => {
						uni.navigateTo({
							url:"suus?type=2&unm="+this.hechengCount+'&tui='+JSON.stringify(res)
						})
					})
				} else if (this.type == 1) {
					this.http(`exchange/${this.uuid}/confirm`, {
						num: this.hechengCount
					}, 'post').then(res => {
						uni.navigateTo({
							url:"suus?type=1&unm="+this.hechengCount+'&tui='+JSON.stringify(res)
						})
					})
				}

			},
			hechengchange(e) {
				if (e.show) {
					this.hechengCount = 1
				}
			},
			jian() {
				if (this.hechengCount > 1) {
					this.hechengCount--
				}
			},
			jia() {
				this.hechengCount++
			},
			numbetsrue() {
				if (this.type == 0) {
					this.ahecheng = this.hechengCount
					this.chanum = 0
					this.synthesisdata.materials.map((item, index) => {
						this.numb(index, item.num * this.hechengCount)
					});
					this.taphes();
					this.$refs.hecheng.close()
				} else if (this.type == 1 || this.type == 2) {
					this.tapfens()
					this.hechengCount = 1
					this.$refs.hecheng.close()
				}
			},
			numb(index, num) {

				var sd = this.isall[index].slice(0, num)
				this.selected[index] = sd

				if (this.selected[index].length == num) {
					this.chanum++
				}

				this.pgList = (100 / (this.alllnums)) * this.chanum


			},
			getp(materials_id, index, num) {

				this.http('combination/selectPackage', {
					materials_id
				}, 'post').then(res => {
					for (var i = 0; i < res.data.length; i++) {
						if (res.data[i].status != 5 || res.data[i].meta_chain != 0) {
							this.isall[index].push(res.data[i].id)
						}
					}

					var sd = this.isall[index].slice(0, num)
					this.selected[index] = sd


					if (this.selected[index].length == num) {
						this.chanum++
					}

					this.pgList = (100 / (this.alllnums)) * this.chanum




				})

			},

			taphes() {
				if (this.chanum == this.alllnums) {
					var url ='combination/'
					if(this.stype==3){
						url ='bfcombination/'
					}
					this.http(`${url}${this.uuid}/confirm`, {
						materials: this.selected,
						num: this.hechengCount,
					}, 'post').then(res => {
						// this.synthesisdata.materials.map((item, index) => {
						// 	this.isall[index].splice(0, item.num * this.hechengCount)
						// })
						 // this.numbetsrue()
						 

						uni.navigateTo({
							url:'suus?type=0&unm='+this.hechengCount+'&stype='+this.stype+'&tui='+JSON.stringify(res)
						})
					})

				} else {
					uni.showToast({
						title: "合成消耗不足",
						icon: "none"
					})
				}


			},
			quedingd() {
				this.selected[this.selindex] = this.sel;

				this.chanum = 0;
				this.selected.map((item) => {
					this.chanum += item.length;

				});
				this.chanum = 0
				this.selected.map(item => {
					this.chanum += item.length
				})

				this.pgList = (100 / this.alllnums) * this.chanum



				this.synthesisdata.materials[this.selindex].nums = this.itemindex.num


				this.$refs.getcollection.close()



			},
			tapxianshi(index, item) {
				if (item.status == 5 || item.meta_chain == 0) {
					return;
				}
				if (this.tapselm[index].check) {
					this.remove(this.tapselm[index].id);
				} else {
					if (this.sel.length == this.synthesisdata.materials[this.selindex].num * this.hechengCount) {
						uni.showToast({
							title: '只能选 ' + this.synthesisdata.materials[this.selindex].num * this.hechengCount +
								' 个',
							icon: 'none',
						});
						return;
					}
					this.sel.push(this.tapselm[index].id);
				}
				this.tapselm[index].check = !this.tapselm[index].check;
				if (this.sel.length == this.synthesisdata.materials[this.selindex].num * this.hechengCount) {
					this.checkd = false;
				} else {
					this.checkd = true;
				}
				this.tindexm = index;
			},
			indexof(val) {
				for (var i = 0; i < this.sel.length; i++) {
					if (this.sel[i] == val) return i;
				}
				return -1;
			},
			remove(val) {
				var index = this.indexof(val);
				if (index > -1) {
					this.sel.splice(index, 1);
				}
			},
			itrmgd(item, index) {
				this.selindex = index
				this.itemindex = item

				this.http('combination/selectPackage', {
					materials_id: item.data[0].id
				}, 'post').then(res => {

					this.checkd = true;
					this.sel = [];
					res.data.map((item) => {
						item.check = false;
					});

					this.tapselm = res.data

					this.$refs.getcollection.open()
				})
			}
		} 
	} 
</script>

<style>
	.pilaing {
		height: 510rpx;
		border-top-right-radius: 21rpx;
		border-top-left-radius: 21rpx;
		box-shadow: 0rpx 5rpx 19rpx 0rpx rgba(255, 255, 255, 0.4);
	}

	.gaoumai {
		width: 111rpx;
		height: 49rpx;
		background: linear-gradient(0deg, #FF6E44, #FFA453, #FFDC7F);
		border-radius: 24rpx;
	}

	.dayuan {
		width: 28rpx;
		height: 28rpx;
		background: #FFFFFF;
		border-radius: 50%;
		border: 1px solid #000000;
	}

	.xiaoyuan {
		width: 15rpx;
		height: 15rpx;
		background: #000000;
		border-radius: 50%;
	}
</style>